<template>
    <view class="order-detail-page">
        <view class="top-bg"></view>
        <view class="address-container">
            <view class="card">
                <u-cell :title="`${detail.addressName} ${detail.addressMobile}`" :label="detail.orderAddress" :border="false"></u-cell>
            </view>
        </view>
        <view class="goods-container">
            <view class="card">
                <u-cell v-for="(item,index) in detail.orderGoodsSnapshot" :key="index" :title="item.goodsName" :label="item.keyName" :border="false">
                    <template #icon>
                        <up-image 
                        :show-loading="true" 
                        width="143rpx" 
                        height="143rpx"
                        radius="15rpx"
                        :src="item.cover"></up-image>
                    </template>
                    <template #value>
                        <view class="value">
                            <text>￥{{item.price}}</text>
                            <text>x{{item.quantity}}</text>
                        </view>
                    </template>
                </u-cell>
            </view>
        </view>
        <view class="info-container">
            <view class="card">
                <u-cell label="订单编号" :value="detail.orderCode" :border="false"></u-cell>
                <u-cell label="下单时间" :value="dateFormat(detail.createTime)" :border="false"></u-cell>
                <u-cell label="卖家留言" :value="detail.clientRemark??'--'" :border="false"></u-cell>
            </view>
        </view>
        <view class="count-container">
            <view class="card">
                <u-cell label="订单金额" :value="`￥${detail.orderPrice}`"></u-cell>
                <u-cell :border="false">
                    <template #value>
                        <text class="countQuantity">实付款<text class="price">￥{{roundToDecimal(detail.paymentAmount,2)}}</text></text>
                    </template>
                </u-cell>
            </view>
        </view>
        <view class="footer">
            <view class="main">
                <view class="cancel" @click="handelCancel" v-if="detail.orderStatus=='WAIT_PAY'">取消</view>
                <view class="pay" @click="handelPay" v-if="detail.orderStatus=='WAIT_PAY'">去支付</view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref } from "vue"
import { onLoad } from "@dcloudio/uni-app";
import { get } from "@/libs/request";
import { dateFormat , roundToDecimal,red } from "@/libs/utils"
const orderId = ref<number>(0);
const detail = ref<{
    addressName:String,
    addressMobile:String,
    orderAddress:String,
    orderCode:String,
    createTime:number,
    paymentAmount:number,
    orderPrice:number,
    orderStatus:string,
    clientRemark:String,
    orderGoodsSnapshot:Array<any>
}>({
    addressName:"",
    addressMobile:"",
    orderAddress:"",
    orderCode:"",
    createTime:0,
    paymentAmount:0,
    orderPrice:0,
    orderStatus:'',
    clientRemark:"",
    orderGoodsSnapshot:[],
});
/**
 * 获取详情
 */
const getDetail = ()=>{
    get(`order/detail/${orderId.value}`).then((res:any)=>{
        if(res.errCode == 0){
            detail.value = res.data;
        }
    })
}
/**
 * 点击取消订单
 */
const handelCancel = ()=>{
    get(`order/cancel/${orderId.value}`).then((res:any)=>{
        if(res.errCode == 0){
            uni.showToast({
                title: res.errMsg,
                icon: "success",
                duration: 2000
            });
            setTimeout(()=>{
                red(`/subpackage/order/pages/purchanse/list`)
            },2000)
        }
    })
}
const handelPay = ()=>{
    get(`order/pay/${orderId.value}`).then((res:any)=>{
        if(res.errCode == 0){
            uni.showToast({
                title: res.errMsg,
                icon: "success",
                duration: 2000
            });

        }
    })
}
onLoad((opt: any)=>{
    orderId.value = Number(opt?.orderId);
    getDetail();
})
</script>
<style scoped lang="less">
.order-detail-page{
    background: #f7f7f7;
    padding-top: 210rpx;
    padding-bottom: 120rpx;
    .card{
        width: 100%;
        background: #FFFFFF;
        border-radius: 15rpx;
        box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
    }
    .top-bg{
        height: 100rpx;
        background: #FC3247;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 0;
        transform: rotate(180deg);
        border-radius: 50% / 10% 10% 0 0;

        &.default {
            height: 100rpx;
            border-radius: 0;
        }
    }
    .address-container{
        position: absolute;
        top: 60rpx;
        width: 100%;
        padding: 0 20rpx;
        box-sizing: border-box;
    }
    .goods-container{
        padding: 0 20rpx;
        .value{
            display: flex;
            flex-flow: column;
            align-items: flex-end;
            font-size: 12px;
            color: #909193;
        }
    }
    .info-container{
        margin-top: 20rpx;
        padding: 0 20rpx;
    }
    .count-container{
        margin-top: 20rpx;
        padding: 0 20rpx;
        .countQuantity{
            text-align: right;
            margin-left: auto;
            font-size: 14px;
            line-height: 24px;
            color: #606266;
            .price{
                margin-left: 10rpx;
                color: #ff0000;
            }
        }
    }
    .footer{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #FFFFFF;
        height: 90rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid #d6d6d652;
        .main{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 0 20rpx;
            .cancel{
                width: 180rpx;
                height: 60rpx;
                line-height: 60rpx;
                text-align: center;
                border-radius: 25rpx;
                border: 1px solid #d6d7d9;
                box-sizing: border-box;
                margin-right: 10rpx;
            }
            .pay{
                width: 180rpx;
                height: 60rpx;
                line-height: 60rpx;
                background: linear-gradient(90deg, rgb(254, 96, 53), rgb(239, 18, 36));
                color: #FFFFFF;
                text-align: center;
                border-radius: 25rpx;
            }
        }
    }
}

</style>